<template>
    <div>
        <canvas id="canvas" ref="canvas" width="200" height="200"></canvas>
    </div>
</template>
<script>
export default {
    data (){
        return {

        }
    },
    props:{
        companyName:{
            type:String,
            default:''
        },
        departName:{
            type:String,
            default:''
        },
    },
    mounted(){
        this.init();
    },
    methods:{
        init(){
            var canvas = document.getElementById("canvas");
            // var canvas = this.$refs.canvas;
            var context = canvas.getContext('2d');
        
            var text = this.departName;
            var companyName = this.companyName;
        
            // 绘制印章边框
            var width = canvas.width / 2;
            var height = canvas.height / 2;
            context.lineWidth = 4.5;
            context.strokeStyle = "#f00";
            context.beginPath();
            context.arc(width, height, 75, 0, Math.PI * 2);//宽、高、半径
            context.stroke();
        
            //画五角星
            this.create5star(context,width,height,20,"#f00",0);
        
                // 绘制印章名称
                context.font = '17px 宋体';
                context.textBaseline = 'middle';//设置文本的垂直对齐方式
                context.textAlign = 'center'; //设置文本的水平对对齐方式
                context.lineWidth=1;
                context.strokeStyle = '#f00';
                context.strokeText(text,width,height+45);
        
                // 绘制印章单位  
                context.translate(width,height);// 平移到此位置,
                context.font = '20px 宋体';
                var  count = companyName.length;// 字数
                var  angle = 4*Math.PI/(3*(count - 1));// 字间角度 
                var chars = companyName.split("");
                var c;
            for (var i = 0; i < count; i++) {
                c = chars[i];// 需要绘制的字符   
                if (i == 0) {
                    context.rotate(5 * Math.PI / 6);
        
                } else{
                    context.rotate(angle);
                }
        
                context.save();
                context.translate(58, 0);// 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离
                context.rotate(Math.PI / 2);// 旋转90度,让字平行于x轴
                context.strokeText(c, 0, 0);// 此点为字的中心点
                context.restore();
            }
        },
        //绘制五角星
		create5star(context, sx, sy, radius, color, rotato) {
			context.save();
			context.fillStyle = color;
			context.translate(sx, sy);//移动坐标原点
			context.rotate(Math.PI + rotato);//旋转
			context.beginPath();//创建路径
			var x = Math.sin(0);
			var y = Math.cos(0);
			var dig = Math.PI / 5 * 4;
			for (var i = 0; i < 5; i++) {//画五角星的五条边
				var x = Math.sin(i * dig);
				var y = Math.cos(i * dig);
				context.lineTo(x * radius, y * radius);
			}
			context.closePath();
			context.stroke();
			context.fill();
			context.restore();
		}
    }
}
</script>
<style>
</style>
  
   